<template>
  <div class="h-100">
      <el-page-header
        @back="goBack"
        :content="this.$store.state.titleName"
        class="f-16 p-20"
      ></el-page-header>

      <div class="p-50 h-100 o-y-auto">
     <el-table
    :data="tableData"
    type="expand"
    v-loading="loading"
    style="width: 100%">
    <el-table-column
      label="留言人姓名">
      <template slot-scope="scope">
        {{ scope.row.name }}
      </template>
    </el-table-column>
    <el-table-column
      label="留言人手机号">
      <template slot-scope="scope">
        {{ scope.row.phone }}
      </template>
    </el-table-column>
    <el-table-column
      label="留言内容">
      <template slot-scope="scope">
        <!-- <el-tooltip placement="top">
          <div class="t-c" style="width:360px;line-height:26px;" slot="content">{{scope.row.content}}</div>
          <el-button>查看</el-button>
        </el-tooltip> -->
        {{scope.row.content}}
      </template>
    </el-table-column>
    <el-table-column
      label="留言时间">
      <template slot-scope="scope">
        {{ scope.row.creatTime }}
      </template>
    </el-table-column>
    <!-- <el-table-column label="操作">
      <template slot-scope="scope">
          <el-button
          size="mini"
          type="primary"
          @click="handleEdit(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column> -->
  </el-table>

  <!-- 分页 -->
    <div class="t-c m-tb-30">
      <el-pagination background layout="prev, pager, next" :total="pageTotal" :page-size="pageSize" @current-change="handleCurrentChange"></el-pagination>
    </div>

  </div>
  </div>
</template>
<script>
import { queryMessage } from "../http/api";
export default {
  name: "messageList",
  data() {
    return {
      loading: true,
      tableData: [],
      //分页
      pageTotal: 0,
      pageSize: 15,
      pageNo: 1
    };
  },
  created() {
    this.queryMessage();
  },
  methods: {
    // 查询栏目
    queryMessage() {
      const data = {
        pageNo: this.pageNo,
        pageSize: this.pageSize
      };
      queryMessage(data).then(res => {
        console.log({ 留言列表: res });
        if (res.data.list.length > 0) {
          this.tableData = res.data.list;
        }
        this.pageTotal = res.data.totalCount;
        this.loading = false;
      });
    },
    // 分页
    handleCurrentChange(val) {
      this.pageNo = val;
      this.queryMessage();
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

